<template>
  <van-overlay
    :show="main._resitre"
    :lock-scroll="false"
    z-index="100"
    class="flex justify-center items-center"
  >
    <div
      class="bg-[#2f4553] text-white p-8 rounded-lg shadow-lg w-full max-w-md mx-4"
      style="
        max-width: 500px;
        min-width: 200px;
        max-height: calc(100% - 3em);
        overflow: auto;
      "
    >
      <div class="flex justify-between items-center mb-4">
        <h2 class="text-xl font-bold text-center w-full">
          {{ $t("layer.login.CreateanAccount") }}
        </h2>
        <button class="text-gray-400 hover:text-white">
          <van-icon name="close" class="close" @click="closeLogin" />
        </button>
      </div>
      <div class="flex justify-between items-center mb-6">
        <button v-if="showStep" class="text-gray-400 hover:text-white">
          <van-icon
            name="arrow-left"
            @click="
              showStep = false;
              isScrolledToBottom = false;
            "
          />
        </button>
        <p class="..text-center w-full">
          {{ $t("layer.login.step") }} {{ !showStep ? "1" : "2" }}/2:
          {{ !showStep ? $t("layer.login.step1") : $t("layer.login.step2") }}
        </p>
      </div>
      <!-- 步骤1 -->
      <form v-if="!showStep" @submit.prevent="submitFormRe">
        <!-- 正常注册 -->
        <div v-if="!quickRegister">
          <!-- 邮箱 -->
          <div class="mb-4" v-if="main.registerConfig[0]?.show">
            <label class="block mb-1" for="email">
              {{ $t("layer.login.Email") }}
              <span
                class="text-red-500"
                v-show="main.registerConfig[0]?.required"
                >*</span
              >
            </label>
            <input
              type="text"
              id="email"
              v-model="email"
              @blur="validateEmail"
              :class="{ 'border-red-500': !emailError }"
              class="w-full p-3 bg-[#0f212e] border border-gray-600 rounded focus:outline-none focus:border-blue-500"
            />
            <!-- <small
              v-if="main.registerConfig[0]?.required && emailError"
              class="text-red-500"
            >
              {{ emailError }}
            </small> -->
            <ul class="text-sm mt-2" v-if="main.registerConfig[0]?.required">
              <li class="flex items-center">
                {{ emailError ? "✅" : "❌" }}
                <span
                  :class="emailError ? 'text-[#16c60c]' : 'text-[#f03a17]'"
                  >{{ $t("layer.login.EmailErrcode") }}</span
                >
              </li>
            </ul>
          </div>
          <!-- 账户名 -->
          <div class="mb-4">
            <label class="block mb-1" for="username">
              {{ $t("layer.login.accont") }}
              <span class="text-red-500">*</span>
            </label>
            <input
              type="text"
              id="username"
              v-model="username"
              @change="validateUsernameValue"
              @blur="validateUsername"
              maxlength="14"
              :class="{ 'border-red-500': usernameError }"
              class="w-full p-2 bg-[#0f212e] border border-gray-600 rounded focus:outline-none focus:border-blue-500"
            />
            <small v-if="usernameError" class="text-red-500">
              {{ usernameError }}
            </small>
            <small v-else class="text-gray-400">
              {{ $t("layer.login.errcode1") }}
            </small>
          </div>
          <!-- 密码 -->
          <div class="mb-4 relative">
            <label class="block mb-1" for="password">
              {{ $t("layer.login.password") }}
              <span
                v-show="main.registerConfig[0]?.required"
                class="text-red-500"
                >*</span
              >
            </label>
            <div class="relative">
              <input
                type="password"
                id="password"
                v-model="password"
                @input="validatePassword"
                placeholder=""
                autocomplete="off"
                class="w-full p-2 bg-[#0f212e] border border-gray-600 rounded focus:outline-none focus:border-blue-500 pr-10"
              />
              <button
                type="button"
                class="absolute right-2 top-2 text-gray-400 hover:text-white"
              >
                <i class="fas fa-eye"></i>
              </button>
            </div>
            <div class="mt-2">
              <div class="flex items-center">
                {{ passwordCriteria.length ? "✅" : "❌" }}
                <span
                  class="ml-2"
                  :class="
                    passwordCriteria.length
                      ? 'text-[#16c60c]'
                      : 'text-[#f03a17]'
                  "
                  >{{ $t("layer.login.errcode4") }}</span
                >
              </div>
            </div>
          </div>
          <div class="mb-4 relative">
            <label class="block mb-1" for="password">
              {{ $t("layer.login.cpassword") }}
              <span class="text-red-500">*</span>
            </label>
            <input
              type="password"
              class="bg-[#0f212e] text-white p-2 w-full rounded-md"
              v-model="confirmPassword"
              autocomplete="off"
              @input="validateConfirmPassword"
            />
            <ul class="text-sm mt-2">
              <li class="flex items-center">
                {{ passwordMatch ? "✅" : "❌" }}
                <span
                  :class="passwordMatch ? 'text-[#16c60c]' : 'text-[#f03a17]'"
                  >{{ $t("layer.login.errcode5") }}</span
                >
              </li>
            </ul>
          </div>

          <!-- 手机号 -->
          <div v-if="main.registerConfig[1]?.show">
            <div class="mb-4 relative">
              <label class="block mb-1" for="password">
                {{ $t("page.setting.phoneNumber") }}
                <span
                  v-show="main.registerConfig[1]?.required"
                  class="text-red-500"
                  >*</span
                >
              </label>
              <div class="relative">
                <span class="absolute top-[8px] left-[6px]">+234</span>
                <input
                  class="bg-[#0f212e] pl-[46px] text-white p-2 w-full rounded-md"
                  v-model="cellPhoneNumber"
                  @input="changeCellPhoneNumber"
                />
              </div>
              <ul class="text-sm mt-2">
                <li class="flex items-center">
                  {{ cellPhoneNumberMSg ? "✅" : "❌" }}
                  <span
                    :class="
                      cellPhoneNumberMSg ? 'text-[#16c60c]' : 'text-[#f03a17]'
                    "
                    >{{ $t("layer.login.errcode8") }}</span
                  >
                </li>
              </ul>
            </div>
            <div class="mb-4 relative">
              <label class="block mb-1" for="password">
                {{ $t("layer.login.mobileVerificationCode") }}
                <span class="text-red-500">*</span>
              </label>
              <div class="flex justify-between relative items-center">
                <input
                  class="bg-[#0f212e] text-white p-2 w-full rounded-md"
                  v-model="phoneCode"
                />

                <div
                  class="absolute right-2 top-[50%] transform -translate-y-[50%] text-[#818da3]"
                  v-if="countdown > 0"
                >
                  {{ countdown }} {{ $t("page.setting.SendAgainSeconds") }}
                </div>
                <div
                  v-else
                  class="absolute right-2 top-[50%] transform -translate-y-[50%] text-[#16c60c]"
                  @click="sedPhoneNumber"
                >
                  {{ $t("page.setting.SendVerificationCode") }}
                </div>
              </div>
              <ul class="text-sm mt-2">
                <li class="flex items-center">
                  {{ phoneCodeMsg ? "✅" : "❌" }}
                  <span
                    :class="phoneCodeMsg ? 'text-[#16c60c]' : 'text-[#f03a17]'"
                    >{{ $t("layer.login.errcode9") }}</span
                  >
                </li>
              </ul>
            </div>
          </div>
          <!-- 邀请码 -->
          <div class="mb-4 relative" v-if="main.registerConfig[2]?.show">
            <label class="block mb-1" for="password"
              >{{ $t("layer.login.code") }}
              <span
                v-show="main.registerConfig[2]?.required"
                class="text-red-500"
                >*</span
              ></label
            >

            <div class="flex justify-between">
              <input
                type="text"
                autocomplete="off"
                v-model="invit_code"
                :disabled="invit_codeDisabled"
                @blur="changeInputVal"
                class="bg-gray-800 text-white p-2 rounded-l border border-gray-700 w-full"
              />
            </div>

            <ul class="text-sm mt-2" v-if="main.registerConfig[2]?.required">
              <li class="flex items-center">
                {{ invitCodeMsg ? "✅" : "❌" }}
                <span
                  :class="invitCodeMsg ? 'text-[#16c60c]' : 'text-[#f03a17]'"
                  >{{ $t("layer.login.errcode11") }}</span
                >
              </li>
            </ul>
          </div>

          <div class="mb-4 relative" v-if="main.registerConfig[3]?.show">
            <label class="block mb-1" for="password">
              {{ $t("layer.login.CAPTCHA") }}
              <span
                class="text-red-500"
                v-show="main.registerConfig[3]?.required"
                >*</span
              >
            </label>
            <div class="flex justify-between">
              <input
                type="text"
                autocomplete="off"
                v-model="code"
                @blur="getChangeInputCode"
                class="bg-gray-800 text-white p-2 rounded-l border border-gray-700 w-2/3"
              />
              <img
                alt=""
                :src="codeSrc"
                @click="getCode"
                class="w-1/4 cursor-pointer"
              />
            </div>
            <ul class="text-sm mt-2" v-if="main.registerConfig[3]?.required">
              <li class="flex items-center">
                {{ codeMsg ? "✅" : "❌" }}
                <span :class="codeMsg ? 'text-[#16c60c]' : 'text-[#f03a17]'">{{
                  $t("layer.login.errcode12")
                }}</span>
              </li>
            </ul>
          </div>

          <button
            type="submit"
            class="w-full bg-green-500 text-black p-3 rounded hover:bg-green-600"
          >
            {{ $t("layer.wallet.nextstep") }}
          </button>
        </div>
        <!-- 快速注册 没用 -->
        <div v-else>
          <div class="mb-4">
            <label class="block text-white mb-1"
              >手机号 <span class="text-red-500">*</span></label
            >
            <div class="flex">
              <select
                class="bg-gray-800 text-white p-2 rounded-l border border-gray-700"
              >
                <option>+86</option>
              </select>
              <input
                type="text"
                autocomplete="off"
                v-model="phone"
                class="bg-gray-800 text-white p-2 rounded-r border border-gray-700 w-full"
              />
            </div>
            <small v-if="phoneError" class="text-red-500">{{
              phoneError
            }}</small>
          </div>
          <div class="mb-4">
            <label class="block text-white mb-1"
              >密码 <span class="text-red-500">*</span></label
            >
            <div class="relative">
              <input
                :type="passwordFieldType"
                v-model="password"
                placeholder=""
                autocomplete="off"
                class="bg-gray-800 text-white p-2 rounded border border-gray-700 w-full"
              />
              <button
                type="button"
                @click="togglePasswordVisibility"
                class="absolute right-2 top-2 text-white"
              >
                <i :class="passwordFieldIcon"></i>
              </button>
            </div>
          </div>
          <div class="mb-4 flex">
            <input
              type="text"
              autocomplete="off"
              v-model="code"
              class="bg-gray-800 text-white p-2 rounded-l border border-gray-700 w-2/3"
              placeholder=""
            />
            <button
              type="button"
              class="bg-blue-500 text-white p-2 rounded-r w-1/3"
            >
              获取验证码
            </button>
          </div>
          <button
            type="submit"
            class="bg-green-500 text-white p-2 rounded w-full"
          >
            继续
          </button>
        </div>
      </form>
      <!-- 步骤2 -->
      <form v-else>
        <div
          class="text-sm overflow-y-auto max-h-72 pr-2 mb-4"
          @scroll="handleScroll"
          ref="termsContent"
        >
          <h2 class="font-bold">
            {{ $t("layer.register.title") }}
          </h2>
          <p>
            {{ $t("layer.register.p1") }}
          </p>
          <p>
            {{ $t("layer.register.p2") }}
          </p>
          <p>
            {{ $t("layer.register.p3") }}
          </p>
          <p>
            {{ $t("layer.register.p4") }}
          </p>
          <p>
            {{ $t("layer.register.p5") }}
          </p>
          <p>
            {{ $t("layer.register.p6") }}
          </p>
          <p>
            {{ $t("layer.register.p7") }}
          </p>
          <p>
            {{ $t("layer.register.p8") }}
          </p>
        </div>
        <div class="flex items-center mb-4">
          <input
            type="checkbox"
            autocomplete="off"
            id="accept-terms"
            v-model="isChecked"
            :disabled="!isScrolledToBottom"
            class="mr-2"
            @change="hideError"
          />
          <label for="accept-terms" class="text-sm">{{
            $t("layer.login.hasread")
          }}</label>
        </div>
        <div
          v-if="showError"
          class="text-red-500 text-sm flex items-center mb-4"
        >
          <i class="fas fa-exclamation-circle mr-2"></i>
          <span>{{ $t("layer.login.errcode6") }}</span>
        </div>
        <div
          class="bg-green-500 text-black text-center font-bold py-2 rounded cursor-pointer"
          @click="startGame"
        >
          {{ $t("layer.login.register") }}
        </div>
      </form>
      <!-- <div v-if="!showStep">
            <div class="my-4 text-center text-gray-400">或者使用</div>
            <div class="flex justify-center space-x-4">
              <a @click="quickRe">{{
                quickRegister ? "电子邮件注册" : "手机号快速注册"
              }}</a>
            </div>
          </div> -->
      <div class="text-center mt-4">
        <!-- <span class="text-gray-400">{{
          $t("layer.login.Alreadyhaveanaccount?")
        }}</span>
        <a href="#" @click="clicklog" class="text-blue-500 hover:underline">{{
          $t("layer.login.login")
        }}</a> -->
      </div>
    </div>
  </van-overlay>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { mainAct } from "@/store/activeda";
import { useI18n } from "vue-i18n";
import {
  userRegister,
  userLogin,
  getCaptcha,
  checkCaptcha,
  getUserExists,
  postUserEmial,
  postUserPhoneSend,
  postUserPhoneCheckGetCode,
  postUserSmsCodeCheck
} from "@/api/user.js";
import { eventBus } from "@/utils/eventBus";
import { activeRegister } from "@/api/active.js";
import { useRouter } from "vue-router";

const router = useRouter();
const { t } = useI18n();
const main = mainAct();
const isChecked = ref(false);
const isScrolledToBottom = ref(false);
const invit_codeDisabled = ref(false);
const invit_code = ref("");
const showStep = ref(false);
const codeSrc = ref("");
const codeId = ref(null);
const cellPhoneNumberMSg = ref(false);
const email = ref("");
const phone = ref("");
const username = ref("");
const password = ref("");
const registerNum = ref(null);
const code = ref("");
const dobDay = ref("");
const dobMonth = ref("");
const dobYear = ref("");
const phoneCode = ref("");
const phoneNumber = ref("");
const promoCode = ref(false);
const emailError = ref(false);
const phoneError = ref("");
const usernameError = ref("");
const invitCodeMsg = ref(false);
const codeMsg = ref(false);
const passwordCriteria = ref({
  upperLower: false,
  number: false,
  length: false
});
const codeErr = ref(false);
const showError = ref(false);
const cellPhoneNumber = ref("");
const confirmPassword = ref("");
const termsContent = ref(null);

const validatePassword = () => {
  passwordCriteria.value.length = password.value.length >= 6;
};

const handleScroll = () => {
  const element = termsContent.value;
  // console.log((element.scrollHeight - element.scrollTop)* 0.8);
  // console.log(element.clientHeight);
  if ((element.scrollHeight - element.scrollTop) * 0.8 < element.clientHeight) {
    console.log("滚动到底");
    isScrolledToBottom.value = true;
  }
};

const changeInputVal = () => {
  main.invit_code = invit_code.value;
  if (invit_code.value.length) {
    invitCodeMsg.value = true;
  } else {
    invitCodeMsg.value = false;
  }
};

const getChangeInputCode = () => {
  if (code.value.length) {
    codeMsg.value = true;
  } else {
    codeMsg.value = false;
  }
};

const validateEmail = () => {
  const emailPattern = /^[a-zA-Z0-9_.%+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/;
  if (emailPattern.test(email.value)) {
    emailError.value = true;
  } else {
    emailError.value = false;
  }
  console.log("validateEmail", emailError.value);
};
const sedPhoneNumber = () => {
  let msg = t("layer.login.errcode8");
  if (!cellPhoneNumberMSg.value)
    return ElNotification({
      position: "top-left",
      zIndex: 1004,
      title: "Error",
      message: msg,
      type: "error"
    });
  postUserPhoneSend({ phone: cellPhoneNumber.value })
    .then(res => {
      if (res.errno == 0) {
        startCountdown();
      }
    })
    .catch(err => {});
};

const countdown = ref(0);
const intervalId = ref(null); // 使用 null 初始值，因为 setInterval 返回的是一个数字

const startCountdown = () => {
  if (intervalId.value) {
    clearInterval(intervalId.value); // 如果已经有一个定时器在运行，先清除它
  }
  countdown.value = 60;
  intervalId.value = setInterval(() => {
    // 存储新的定时器 ID
    if (countdown.value > 0) {
      countdown.value--;
    } else {
      clearInterval(intervalId.value); // 清除定时器
      intervalId.value = null; // 将定时器 ID 重置为 null
    }
  }, 1000);
};

const hideError = () => {
  if (isChecked.value) {
    showError.value = false;
  } else {
    showError.value = true;
  }
};
// 校验手机号
const changeCellPhoneNumber = () => {
  let reg = /[789]{1}\d{9}$/;
  if (reg.test(cellPhoneNumber.value)) {
    cellPhoneNumberMSg.value = true;
  } else {
    cellPhoneNumberMSg.value = false;
  }
};

const goToStep2 = () => {
  showStep.value = true;
};
const getCodeFromUrl = url => {
  const urlObj = new URL(url);
  const params = new URLSearchParams(urlObj.search);
  console.log('params.get("inviteCode")', params.get("inviteCode"));

  return params.get("inviteCode");
};
const getCode = async () => {
  let res = await getCaptcha();
  codeSrc.value = res.data.img;
  codeId.value = res.data.id;
};

const closeLogin = () => {
  main.closeRegister();
  cleardata(); //清空输入框
  //刷新验证码
  getCode();
  //处理勾选协议状态
  isChecked.value = false;
  isScrolledToBottom.value = false;
  eventBus.emit("cloeselogin");
  if (intervalId.value) {
    clearInterval(intervalId.value); // 如果已经有一个定时器在运行，先清除它
  }
};

const cleardata = () => {
  showStep.value = false;
  isChecked.value = false;
  confirmPassword.value = "";
  email.value = "";
  phone.value = "";
  username.value = "";
  password.value = "";
  code.value = "";
  dobDay.value = "";
  dobMonth.value = "";
  dobYear.value = "";
  phoneCode.value = "";
  phoneNumber.value = "";
  promoCode.value = "";
};

onMounted(async () => {
  await getCode();
  let hear = window.location.href;
  if (hear.includes("inviteCode")) {
    invit_codeDisabled.value = true;
    invit_code.value = getCodeFromUrl(window.location.href) || "";
    main.invit_code = invit_code.value;
  } else {
    invit_codeDisabled.value = false;
    if (main && main.invit_code?.length) {
      invit_code.value = main.invit_code;
    }
  }
  changeInputVal();
});

const validateCode = async () => {
  let value = {
    id: codeId.value,
    code: code.value
  };
  let res = await checkCaptcha(value);
  if (res.data.valid != 1) {
    codeErr.value = false;
    getCode();
    ElNotification({
      position: "top-left",
      zIndex: 1004,
      title: "Error",
      message: t("layer.login.errcode13"),
      type: "error"
    });
  } else {
    codeErr.value = true;
  }
  console.log(res);
};

const passwordMatch = computed(
  () => password.value === confirmPassword.value && confirmPassword.value != ""
);

const phoneCodeMsg = computed(() => phoneCode.value && phoneCode.value != "");

const postlogin = async val => {
  console.log(val);
  let res = await userLogin(val);
  console.log(res);
  if (res?.errno == 0) {
    // 过期时间7天
    // var time = 604800000; //1000*60*60*24*7;
    // var time = 6000; //1000*60*60*24*7;
    // var storage = window.localStorage;
    // var oldTimestamp = storage.getItem("timestamp"); //以前存的时间戳
    // if (oldTimestamp) {
    //   var nowTimestamp = new Date().getTime(); //当前时间戳
    //   // 如果当前时间戳> 前面存的时间戳+过期时间 表示已经过期
    //   var sumTimestamp = timestamp + time;
    //   if (nowTimestamp > sumTimestamp) {
    //     console.log("登录时间已过期");
    //     storage.clear();
    //     main.isLogin = false;

    //   }
    // }
    main.isLogin = true;
    main.token = res.data.token;
    let user_detail = {
      ...res.data.user_detail,
      uid: res.data.user_detail.uid.toString()
    };
    main.user_detail = user_detail;
    eventBus.emit("showActiveProp");
    // ElNotification({
    //   position: "top-left",
    //   zIndex: 1004,
    //   title: "Success",
    //   message: "Login succeeded",
    //   type: "success"
    // });
    main.closeLoginLayer();
    if (main.user_detail.payment_password_set == 0) {
      ElNotification({
        position: "top-right",
        duration: 0,
        zIndex: 1004,
        title: t("layer.wallet.tip"),
        message: t("layer.wallet.plzSetFst"),
        type: "warning"
      });
    }
    closeLogin();
    // getWallet();
    eventBus.emit("tigger");
    return;
  } else if (res?.errno == 20404) {
    ElNotification({
      position: "top-left",
      zIndex: 1004,
      title: "Error",
      message: res.msg,
      type: "error"
    });

    return;
  } else {
    return;
  }
};

const startGame = async () => {
  if (!isChecked.value) {
    showError.value = true;
  } else {
    showError.value = false;
    // alert("开始游戏");
    let data = {
      user_name: username.value,
      password: password.value,
      password_confirm: confirmPassword.value,
      verify_code: code.value,
      verify_code_id: codeId.value,
      invit_code: main.invit_code,
      email: email.value,
      phone_code: phoneCode.value,
      phone: cellPhoneNumber.value
    };
    console.log(data);
    let res = await userRegister(data);
    if (res.errno == 0) {
      main.invit_code = "";
      // resitre.value = true;
      // main.loginLayer = false;
      //弹窗注册 如果成功
      let res2 = await activeRegister();
      // console.log(res2);
      if (res2.errno == 0) {
        postlogin({ user_name: username.value, password: password.value });
        closeLogin();
        // 如果是空对象就不弹出活动弹窗
        if (Object.keys(res2.data).length === 0) return;
        registerNum.value = res2.data.bonus_amount;
        // main.registerActLayer = true;
        if (main._isMobile) {
          router.push("/");
        }
      }

      return;
    } else {
      return;
    }
  }
};

const submitFormRe = async () => {
  console.log("submitFormRe");

  if (emailError.value.length) return;
  if (usernameError.value.length) return;

  // 邮箱
  if (main.registerConfig[0]?.required && emailError.value == false) {
    console.log("邮箱退出");
    return false;
  }
  // 手机
  if (
    main.registerConfig[1]?.required &&
    (cellPhoneNumber.value == "" || phoneCode.value == "")
  ) {
    console.log("手机退出");
    return false;
  }

  // 推荐码
  if (main.registerConfig[2]?.required && invit_code.value == "") {
    console.log("推荐码退出");
    return false;
  }

  if (main.registerConfig[3]?.required && code.value == "") {
    console.log("验证码退出");
    return false;
  }
  if (username.value == "" || confirmPassword.value == "") {
    console.log("必填未通过");
    return false;
  }

  if (main.registerConfig[2]?.required && invitCodeMsg.value == false) {
    console.log("邀请码");
    return false;
  }

  if (main.registerConfig[3]?.required && codeMsg.value == false) {
    console.log("验证码");
    return false;
  }
  if (showStep) {
    //电邮注册
    if (main.registerConfig[3]?.required) {
      await validateCode();
    }
    if (main.registerConfig[1]?.required) {
      changeCellPhoneNumber();
    }
    validatePassword();
    codeErr.value = main.registerConfig[3]?.required ? codeErr.value : true;
    if (passwordCriteria.value.length && passwordMatch.value && codeErr.value) {
      console.log("下一步");
      let res = await getUserExists({ user_name: username.value });
      let emialRes =
        main.registerConfig[0]?.required &&
        (await postUserEmial({ email: email.value }));

      // 当设置手机短信必填时 需要校验
      if (main.registerConfig[1]?.required) {
        let phoneMsg = await postUserPhoneCheckGetCode({
          phone: cellPhoneNumber.value
        });

        if (phoneMsg.data.is_exist) {
          return ElNotification({
            position: "top-left",
            zIndex: 1004,
            title: "Error",
            message: t("layer.login.phoneNumberAlready"),
            type: "error"
          });
        }

        if (/^\d+$/.test(phoneCode.value)) {
          let phoneCodeRes = await postUserSmsCodeCheck({
            phone: cellPhoneNumber.value,
            code: phoneCode.value
          });

          if (phoneCodeRes.errno != 0) {
            return;
          }
        } else {
          console.log("phoneCode.value 不是有效数字");
          ElNotification({
            position: "top-left",
            zIndex: 1004,
            title: "Error",
            message: t("layer.login.errcode13"),
            type: "error"
          });

          return;
        }
      }

      if (emialRes?.data?.is_exist)
        return ElNotification({
          position: "top-left",
          zIndex: 1004,
          title: "Error",
          message: t("layer.wallet.userEmila"),
          type: "error"
        });
      if (
        res.errno == 0 &&
        res.data.existed == 0 &&
        !emialRes?.data?.is_exist
      ) {
        goToStep2();
      } else {
        ElNotification({
          position: "top-left",
          zIndex: 1004,
          title: "Error",
          message: t("layer.wallet.userName"),
          type: "error"
        });
      }
    }
  } else {
    //快速注册
    await validateCode();
    if (codeErr.value) {
      console.log("验证拦截");
    }
  }
};

const quickRegister = ref(false);
const validateUsername = val => {
  const regex = /[^a-zA-Z0-9]/;
  if (regex.test(val.target.value)) {
    console.log("---------------------*");
    usernameError.value = t("layer.login.errcode10");

    console.log(usernameError.value, "username.username.value---");
    return;
  }
  usernameError.value =
    username.value.length >= 3 && username.value.length <= 14
      ? ""
      : t("layer.login.errcode1");
  console.log(usernameError.value, "username.value---", username.value);
};

const validateUsernameValue = val => {
  const regex = /[^a-zA-Z0-9]/;
  if (regex.test(val.target.value)) {
    usernameError.value = "用户名只能包含字母和数字";
  }
};

const clicklog = () => {
  main.showLoginLayer("no");
  // main.getvcode();123456Aa
};
</script>

<style scoped></style>
